<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"> -->
    <!-- /favicon.ico -->
    <!-- <script src="./js/JavaScript.js"></script> -->
    <!-- <link rel="stylesheet" href="./css/reset.css" type="text/css">
    <link rel="stylesheet" href="./css/style.css" type="text/css"> -->
    <script src="../js/lib/jquery/jquery-3.2.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 800px;
            height: 400px;
            overflow: hidden;
            margin: 200px auto;
            position: relative;
        }

        .big {
            width: 4000px;
            height: 400px;
            position: absolute;
            display: flex;
            left: 0;
            transition: all 0.5s 0s linear;
            /* transition-duration: 1s;
            transition-timing-function: linear;
            transition-delay: 0s;
            transition: all; */

        }

        li {
            width: 800px;
            height: 400px;
        }

        button {
            width: 50px;
            height: 100px;
            background-color: #333;
            font-size: 50px;
            font-weight: 900;
            position: absolute;
            top: 125px;
            opacity: 50%;
        }

        button.left {
            left: 0;
        }

        button.right {
            right: 0;
        }

        .choice {
            position: absolute;
            width: 200px;
            left: 300px;
            bottom: 50px;
            margin: 0 auto;
            display: flex;
        }

        .choice li {
            width: 50px;
            height: 50px;
            background-color: #333;
            border-radius: 50%;
        }

        .choice li.active {
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="big">
            <li class="li1" style="background-color: red;">1</li>
            <li class="li2" style="background-color: yellow;">2</li>
            <li class="li3" style="background-color: blue;">3</li>
            <li class="li4" style="background-color: green;">4</li>
            <li class="li5" style="background-color: red;">5</li>
        </ul>
        <button class="left">&lt;</button>
        <button class="right">&gt;</button>
        <ul class="choice">
            <li class="active dd111"></li>
            <li class="dd111"></li>
            <li class="dd111"></li>
            <li class="dd111"></li>
        </ul>

    </div>

</body>
<script>
    //轮播
    var $ul = $(".big");
    var i = 0;
    var timer;
    var index = 1;

    function go(position) {
        $ul.css("transition", 'all 0.5s 0s linear')
        $ul.css({
            left: position
        })
        console.log(index)
        gensui()
    }

    function yidong() {
        if (index == 5) {
            $ul.css("transition", 'none')
            $ul.css({
                left: 0
            })
            setTimeout(() => {
                index = 1;
                go(-800 * index);
                index++
            }, 0);
        } else {
            go(-800 * index);
            index++;
        }
    }
    timer = setInterval(yidong, 1000);


    //左右
    let $btn_left = $("button.left");
    let $btn_right = $("button.right");
    console.log($btn_left.attr("class"))
    $(".wrap").mouseover(function () {
        clearInterval(timer);
    })
    $(".wrap").mouseout(function () {
        timer = setInterval(yidong, 1000);
    })
    $(".wrap").delegate("button", "click", function () {
        if ([...this.classList] == "left") {
            if (index == 0) {
                $ul.css("transition", 'none')
                $ul.css({
                    left: -3200
                })
                setTimeout(() => {
                    index = 3;
                    go(-800 * index);
                }, 0);
            } else {
                index--;
                go(-800 * index);
            }
        } else {
            yidong()
        }
    })

    //下面圆点
    function gensui() {
        // var dd;
        console.log(index)
        for (i = 0; i < $(".choice").children().length; i++) {
            $(".choice").children()[i].classList.remove("active");
        }
        if (index < 4) {
            $(".choice").children()[index].classList.add("active");
        } else {
            $(".choice").children()[0].classList.add("active");
        }

    }
    console.log($(".choice").children().length);
    $(".choice").children().length;
</script>

</html>